<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js DOM</title>
		<script>
			//放在函数里 是因为执行到这段时 html还没有加载成功
			//1.获取id
			function method(){
				var p1 = document.getElementById("p1");
				// p1.innerHTML="<span style='font-size: 16px;color: #008000;font-family: '黑体';'>hello</span>";
				// document.write(p1.innerHTML);
				p1.innerText="<span style='font-size: 16px;color: #008000;font-family: '黑体';'>hello</span>";
				// document.write(p1.innerText);
				
				//innerText和InnerHtml区别 后者能解析HTML标签
			}
			
			//2.获取name|注意获取到的是数组
			function method1(){
				var p11 = document.getElementsByName("p11");
				
			    console.log(p11);//list
				p11[0].innerHTML="test....";
				console.log(p11[0].innerHTML);
			}
			
			var co1=111111111;
			var fs1=10;
			function randomColor(){
				return "#"+Math.floor(Math.random()*0xffffff).toString(16);
			}
			function up(){
				var p1=document.getElementById("p1");//必须写引号
				p1.style.backgroundColor="#FAEBD7";
				fs1+=4;
				p1.style.fontSize=fs1+'px';
				
				p1.style.color=randomColor();
				// p1.innerText++;
			}
			
			//class
			function method3(){
				var cp1 = document.getElementsByClassName("cp1");
				cp1[0].innerText+="haha";
				cp1[1].innerText+="你好帅啊";
				cp1[2].innerText+="我要给你生猴子";
				
			}
			
			//tagName
			function method4(){
				var p=document.getElementsByTagName("span");
				p[0].innerText="这是第一个标签";
				p[1].innerText="这是第二个标签";
				p[2].innerText="这是第三个标签";
				// p[3].innerText="这是第三个标签";会在控制台报错
				
			}
			



		</script>
	</head>
	<body>
		<div id="">
			<span id="p1" name="p1" class="cp1">1</span>
			<span id="p11" name="p11" class="cp1">????</span>
			<span id="p12" name="p11" class="cp1">!!!!!!!!</span>
		</div>
		

		<div id="div001" name="div1" onclick="method1();method();">这是id=div001</div>
		<div id="div002" name="div2" onclick="up();">这是id=div002</div>
		<div id="div003" name="div3" onclick="method3();">这是id=div003</div>
		<div id="div004" name="div4" onclick="method4();">这是id=div004</div>


		
	</body>
</html>
